<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>登录</title>
  <!-- 引入Bootstrap CSS -->
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
  <h1>用户登录</h1>
  <form id="loginForm">
    <div class="form-group">
      <label for="userName">用户名</label>
      <input type="text" id="userName" name="userName" class="form-control" placeholder="请输入您的用户名" required>
    </div>
    <div class="form-group">
      <label for="userPassword">密码</label>
      <input type="password" id="userPassword" name="userPassword" class="form-control" placeholder="请输入您的密码" required>
    </div>
    <button type="submit" class="btn btn-primary">登录</button>
    <a href="/register" class="btn btn-link">没有账号？去注册</a>
  </form>
</div>

<script>
document.getElementById('loginForm').onsubmit = function(event) {
    event.preventDefault();
    var user = {
        userName: document.getElementById('userName').value,
        userPassword: document.getElementById('userPassword').value
    };
    fetch('/user/login', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(user)
    })
    .then(response => response.json())
    .then(data => {
        if (data.code === 200 && data.message === "success") {
            alert("登录成功");
            window.location.href = "/userManage"; // 登录成功后跳转的页面
        } else {
            alert("登录失败：");
        }
    })
    .catch((error) => {
        console.error('Error:', error);
        alert("登录请求失败，请重试。");
    });
};
</script>

<!-- Bootstrap JS and dependencies (可选) -->
<script src="/static/js/jquery-3.5.1.slim.min.js"></script>
<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>